<template>
  <div>
    根组件：App
    <h1 ref="h1">我是一个H1标签</h1>
    <ChildCom ref="child" />
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import ChildCom from './ChildCom.vue'
export default {
  name: "App",
  components: { ChildCom },
  setup() {
    // 1. 获取DOM元素
    // this.$refs.h1 获取元素  这是vue2的写法
    const h1 = ref(null);
    onMounted(() => {
      // h1.value 就是h1元素
      console.log(h1.value)
    });

    // 2. 获取组件实例
    // 先有一个组件，定义一个响应式数据，通过ref绑定这个响应式数据，数据.value就是组件实例
    const child = ref(null)
    onMounted(()=>{
      // child.value 是组件实例
      child.value.sayHi()
    })

    return { h1 , child};
  },
};
</script>